<template>
  <div class="wasteShopping warp">
    <div class="card"> 
        <div class="title_was">
            <p class="l_tit red">出租/出售</p>
            <p class="r_more gray" @click="moreSellList">
                <span>查看更多</span>
                <i class="el-icon-arrow-right"></i>
            </p>
        </div>
        <el-empty v-if="emptyShowBeg" :description=description :image-size="300"></el-empty> 
        <ul class="pai-item-list" v-else>
            <li class="pai-item" v-for="item in rentOutList" :key="item.id">
                <div class="link_wrap" @click="routeDetail(item)">
                    <el-card class="item_card" :body-style="{ padding: '0px' }">
                    <div class="image">
                        <img :src="imgurls+item.images" class="lot_pic">
                    </div> 
                    <div class="item_content">
                        <div class="item_title">
                            <span>{{item.name}}</span>
                        </div>
                        <div class="item_money">
                            <p>清场时间：{{item.sell_date}}</p>
                            <div class="item_money_time">
                                <p>
                                    <span class="red moneyBig">￥{{item.transaction_price}}</span>
                                </p>
                                <p class="buleBtn" v-if="item.is_business==1">出租</p>
                                <p class="greenBtn" v-else>出售</p>
                            </div>
                        </div>
                    </div>
                </el-card>
                </div>  
            </li>
        </ul>
    </div> 
    <div class="card">
        <div class="title_was">
            <p class="l_tit red">求租/求购</p>
            <p class="r_more gray" @click="goMoreBuyList">
                <span>查看更多</span>
                <i class="el-icon-arrow-right"></i>
            </p>
        </div>
        <el-empty v-if="emptyShowSell" :description=description :image-size="300"></el-empty> 
        <ul class="pai-item-list" v-else>
            <li class="pai-item" v-for="item in begList" :key="item.id">
                <div class="link_wrap" @click="buyDetail(item)">
                    <el-card class="item_card" :body-style="{ padding: '0px' }">
                    <div class="image">
                        <img :src="imgurls+item.images" class="lot_pic">
                    </div> 
                    <div class="item_content">
                        <div class="item_title">
                            <span>{{item.name}}</span>
                        </div>
                        <div class="item_money">
                            <p>清场时间：{{item.sell_date}}</p>
                            <div class="item_money_time">
                                <p>
                                    <span class="red moneyBig">￥{{item.transaction_price}}</span>
                                </p>
                                <p class="redBtn" v-if="item.is_business=='3'">求租</p>
                                <p class="yellowBtn" v-else>求购</p>
                            </div>
                        </div>
                    </div>
                </el-card>
                </div>  
            </li>
        </ul>
        <!-- <el-empty v-if="emptyShow" :description=description :image-size="300"></el-empty>  -->
        <!-- <ul class="toRent_buy_list">
            <li class="buy-item">
                <el-card class="item_card">
                    <div class="card_content">
                        <div class="image">
                            <img src="@/assets/shopping/qiugou.png" class="lot_pic">
                        </div> 
                        <el-row class="info-box">
                            <el-col :span="5">
                                <p class="type_box greenBtn">求购</p>
                                <p class="name">不锈钢T梁模板</p>
                                <div class="q-u">
                                    <span class="q red">5</span>
                                    <span class="u red">套</span>
                                </div>
                            </el-col>
                            <el-col :span="5">
                                <p class="tit_w">进场时间</p>
                                <p class="con_w">2023-10-31</p>
                                <p class="tit_w margin_num">使用周期</p>
                                <p class="con_w">-</p>
                            </el-col>
                            <el-col :span="5">
                                <p class="tit_w">规格</p>
                                <p class="con_w">40m</p>
                                <p class="tit_w margin_num">发布时间</p>
                                <p class="con_w">2023-10-27</p>
                            </el-col>
                            <el-col :span="5">
                                <p class="tit_w">使用地</p>
                                <p class="con_w">广东省广州</p>
                                <p class="tit_w margin_num">浏览量</p>
                                <p class="con_w">已浏览1次</p>
                            </el-col>
                            <el-col :span="4">
                                <p class="tit_w">成交量</p>
                                <p class="con_w">0</p>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="btn">
                            <p class="btn_style"><i class="el-icon-phone-outline"></i>我有货源</p>
                    </div>
                </el-card>
            </li>
        </ul> -->
    </div>
  </div>
</template>
 
<script>
import {getUserInfoID,timestampToTime} from '@/utils/auth'
import {wasteList,AreaList,lotsList,clickFollow} from '@/api/interface'
 
export default {
    name: "AppPhone",
    data() {
        return {
            emptyShowBeg:false,
            emptyShowSell:false,
            description:'',
            rentOutList:[], //出租出售
            begList:[], //求租求购
        };
    },
    created(){
    var userInfo = getUserInfoID();
      if(userInfo){
        var info = JSON.parse(userInfo);
        // this.levelType = info.level;
        this.uid = info.id;
      }
      this.getLotsCardList('1');
      this.getLotsCardList('2');
    },
    methods: {
      getLotsCardList(tt){
        wasteList({type:tt}).then(res=>{
                if(res.code == 200){
                    if(tt=='1'){
                        this.emptyShowBeg = false;
                        this.rentOutList=res.data;
                    }else{
                        this.emptyShowSell = false;
                        this.begList=res.data;
                    
                    }
                    
                }else{
                    if(tt=='1'){
                        this.emptyShowBeg = true;
                        this.description = res.msg;
                        this.rentOutList=[];
                    }else{
                        this.emptyShowSell = true;
                        this.description = res.msg;
                        this.begList=[];
                    }
                    
                } 
          }).catch(err =>{
            this.emptyShow = true;
            this.description = err.msg;
            this.rentOutList=[];
          });
        },
        moreSellList(){
            this.$router.push({path:'/wasteShopping/sellList',query: {typeOnly:'1'}});
        },
        goMoreBuyList(){
            this.$router.push({path:'/wasteShopping/sellList',query: {typeOnly:'2'}});
        },
        // ------标的类型--------
        routeDetail(val){
            let {href}= this.$router.resolve({
                path: '/wasteShopping/shopDetails',   // 这里写的是要跳转的路由地址
                query: {wasteId:val.id}// 这里写的是页面参数
            });
            window.open(href, '_blank');
        },
        buyDetail(val){
            let {href}= this.$router.resolve({
                path: '/wasteShopping/begShopDetails',   // 这里写的是要跳转的路由地址
                query: {wasteId:val.id}// 这里写的是页面参数
            });
            window.open(href, '_blank');
        },
    }
}
</script>
 
<style lang="less" scoped>
@import '@/styles/index.less';
.wasteShopping{
  
  min-height: 100vh;
    .title_was{
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .l_tit{
            font-size: 24px;
            font-weight: bold;
        }
        .r_more{
            font-size: 14px;
        }
    }
    .card{
        margin-top: 30px;
       
        .pai-item-list{
            display: grid;
            justify-content: space-between;
            grid-template-columns: repeat(auto-fill,278px);
            grid-gap: 20px;
            .link_wrap{
                position: relative;
                display: inline-block;
                width: 280px;
                height: 355px;
                text-decoration: none;
                .item_card{
                    border-radius: 8px;
                    .image {
                        height: 240px;
                        .lot_pic{
                            display: block;
                            width: 100%;
                            height: 240px;
                            /deep/.el-image__inner{
                                object-fit: cover;
                            }
                        }
                    }
                    .item_content{    
                        font-family: PingFangSC-Medium,PingFang SC;         
                        .item_title{
                            height: 36px;
                            line-height: 36px;
                            font-size: 14px;
                            background-color: #F2F4F5;
                            padding: 0 12px; 
                        }
                        .item_money{
                            padding: 8px 12px;
                            font-size: 12px;
                            color: #666;
                            .item_money_time{
                                p{
                                    display: inline-block;  
                                }
                                
                                p:last-of-type{
                                    font-size: 12px;
                                    font-weight: 400;
                                    position: absolute;
                                    right: 0px;
                                    padding: 2px 8px 2px 12px;
                                    height: 20px;
                                    line-height: 20px;
                                    text-align: center;
                                    border-radius: 12px 0px 0px 12px;
                                    color: #fff;
                                }
                                .moneyBig{
                                    font-size: 20px;
                                    font-weight: bold;
                                    margin-left: 4px;
                                    margin-top: 4px;
                                }
                            }
                        }
                        .item_money{
                            p{
                                margin-bottom: 10px;
                            }
                        }
                        

                    }
                }
                .item_card:hover{
                    border: 1px solid #cc0000;
                }
            }
        }
    }
    .toRent_buy_box{
        // .toRent_buy_list{
        //     .buy-item{
        //         margin-bottom: 20px;
        //         .item_card{
        //             /deep/.el-card__body{
        //                 display: flex;
        //                 align-items: center;
        //                 justify-content: space-between; 
        //             }
        //             .card_content{
        //                 display: flex;
        //                 align-items: center;
        //                 justify-content: space-between;
        //                 .image{
        //                     margin-right: 20px;
        //                     img{
        //                         width: 108px;
        //                         height: 108px;
        //                         border-radius: 4px;
        //                     }
        //                 }
        //                 .info-box{
        //                     width: 895px;
        //                     font-size: 12px;
        //                     font-family: PingFangSC-Regular,PingFang SC;
        //                     .type_box{
        //                         width: 70px;
        //                         height: 24px;
        //                         line-height: 24px;
        //                         text-align: center;
        //                         color: #fff;
        //                         border-top-right-radius: 15px;
        //                         border-bottom-right-radius: 15px;
        //                     }
        //                     .q-u{
        //                         margin-top: 25px;
        //                         .q{
        //                             font-size: 26px;
        //                             font-weight: bold;
        //                         }
        //                     }
        //                     .name{
        //                         font-size: 16px;
        //                         white-space: nowrap;
        //                         overflow: hidden;
        //                         text-overflow: ellipsis;
        //                         padding-right: 15px;
        //                         margin-top: 6px;
        //                     }
        //                     .tit_w{
        //                         color: #999;
        //                         margin-top: 8px;
        //                     }
        //                     .con_w{
        //                         color: #333;
        //                         margin-top: 8px;
        //                     }
        //                     .margin_num{
        //                         margin-top: 20px;
        //                     }
        //                 }
        //             }
        //             .btn{
        //                 // margin-right: 20px;
        //                 .btn_style{
        //                     width: 100%;
        //                     color: @base-color;
        //                     background: #fef0f0;
        //                     border: 1px solid @base-color;
        //                     display: inline-block;
        //                     line-height: 1;
        //                     white-space: nowrap;
        //                     cursor: pointer;
        //                     text-align: center;
        //                     box-sizing: border-box; 
        //                     outline: 0;
        //                     margin: 0;
        //                     transition: .1s;
        //                     font-weight: 500;
        //                     padding: 12px 20px;
        //                     font-size: 14px;
        //                     border-radius: 4px;
        //                     i{
        //                         margin-right: 6px;
        //                     }
        //                 }
        //             }
        //         }
        //     }
        // }
    }

}


</style>